<template>
	<view class="custom_page">
		<view class="card" style="margin-top: 4rpx;">
			<view class="card_item">
				<view>接收个性化推荐</view>
				<view class="tips">关闭后无法接收本平台个性化内容推荐</view>
			</view>
			<uv-switch v-model="similarityValue" @change="msgChange($event, 1)" active-color="#6F69EA" :active-value="1"
				:inactive-value="0"></uv-switch>
		</view>
		<view class="card">
			<view class="card_item">
				<view>接收信息推送</view>
				<view class="tips">关闭后无法接收本平台重要场景的消息推荐</view>
			</view>
			<uv-switch v-model="msgValue" @change="msgChange($event, 2)" active-color="#6F69EA" :active-value="1"
				:inactive-value="0"></uv-switch>
		</view>
	</view>

	<xzy-popup class="custom-popup-main" ref="popupRef" mode="center" title="温馨提示" :isShowClose="false">
		<view class="custom-popup-box">
			{{contentTips}}
		</view>
		<view class="custom_btn_box">
			<view class="custom_btn cancel" @click="handleSubmit">确定</view>
			<view class="custom_btn" @click="handleCancel">取消</view>
		</view>
	</xzy-popup>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import useStore from '@/stores';
	import {
		SetCustomOnOffApi
	} from "@/api/modules/system";

	const {
		globalStore
	} = useStore()

	const msgValue = ref(globalStore.userInfo.isIndividuation)
	const similarityValue = ref(globalStore.userInfo.isInformation)

	const popupRef = ref()
	const contentTips = ref("")
	const switchType = ref(1)

	function msgChange(e, type) {
		switchType.value = type
		if (type === 1) {
			contentTips.value = "关闭后您将不能看见更多相似订单的优质内容推荐，确认进行相关操作吗？"
		} else {
			contentTips.value = "关闭后您将不能接收订单消息通知，福利活动通知等重要消息推送，确认进行相关操作吗？"
		}
		popupRef.value.open()
	}

	function handleCancel() {
		if (switchType.value === 1) {
			similarityValue.value = similarityValue.value * 1 === 1 ? 0 : 1
		} else {
			msgValue.value = msgValue.value * 1 === 1 ? 0 : 1
		}
		popupRef.value.close()
	}

	function handleSubmit() {
		SetCustomOnOffApi({
			onOffStatus: switchType.value === 1 ? similarityValue.value : msgValue.value,
			tag: switchType.value
		}).then(res => {
			uni.$uv.toast("操作成功");
			if (switchType.value === 1) {
				globalStore.setUserInfo({
					...globalStore.userInfo,
					isInformation: similarityValue.value
				})
			} else {
				globalStore.setUserInfo({
					...globalStore.userInfo,
					isIndividuation: msgValue.value
				})
			}
			popupRef.value.close()
		})
	}

</script>

<style lang="scss" scoped>
	.custom_page {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100%;

		.card {
			margin-bottom: 20rpx;
			padding: 30rpx;
			width: calc(100% - 60rpx);
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.card_item {
				font-size: 30rpx;
				line-height: 50rpx;

				.tips {
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}

	.custom-popup-main {
		.custom-popup-box {
			width: 540rpx;
			padding: 0 30rpx;
		}

		.custom_btn_box {
			width: 100%;
			margin-top: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.custom_btn {
				width: 200rpx;
				height: 80rpx;
				background: #6E68E9;
				border-radius: 10rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.cancel {
				background: #fff;
				border: 1rpx solid #6E68E9;
				color: #222;
			}
		}
	}
</style>